<template>
  <div class="myInfo">
    <div class="title">
      <span>礼物管理</span>
    </div>
    <div class="store">
      <table class="head">
        <th width="10%">序号</th>
        <th width="40%">商品名</th>
        <th width="10%">商品价格</th>
        <th width="20%">商品图片</th>
        <th width="20%">操作</th>
      </table>
      <table class="body">
        <tr v-for="(item,index) in giftData" :key="index">
          <td width="10%">{{index+1}}</td>
          <td width="40%">{{item.name}}</td>
          <td width="10%">{{item.salesPrice}}</td>
          <td width="20%" class="gift-img">
            <div><img :src="item.imageURL" alt=""></div>
          </td>
          <td width="20%" @click="doDeal(item)">修改</td>
        </tr>
      </table>
    </div>
    <div class="change-goods-info" v-if="showChangeGift" @click="showChangeGift=false">
      <div class="goods-wrap" @click.stop="">
        <div class="item goods-name">
          <input type="text" placeholder="请输入商品名字" v-model="nowSelGift.name" />
        </div>
        <div class="item goods-price">
          <input type="text" placeholder="请输入商品价格" v-model="nowSelGift.salesPrice" />
        </div>
        <div class="item goods-img">
          <img v-if="!giftImgUrl" :src="nowSelGift.imageURL" alt="">
          <img v-else :src="giftImgUrl" alt="">
          <div class="upload-img">
            <span>选择图片</span>
            <input type="file" @change="cropImg" name="logo" id="">
          </div>
        </div>
        <div class="item confirm">
          <button @click="save">确定</button>
        </div>
      </div>
    </div>
    <img-crop v-if="showCrop" :oldImg="oldImgBase64" :curCropW="curCropW" :curCropH="curCropH" :curStoreId="curStoreId" @closeImgCrop="showCrop=false" @getCropImgBase="getCropImgBase"></img-crop>
  </div>
</template>

<script>
import imgCrop from "./../components/imgCrop/imgCrop.vue";
import {BASE_URL} from "./../../urlConfig/index";

export default {
  components: { imgCrop },
  data() {
    return {
      giftData: [],
      size: 10,
      totalElements: 0,
      nowSelGift: {},
      showChangeGift: false,
      showCrop: false,
      oldImgBase64: "",
      curCropW: 600, // 裁剪宽度
      curCropH: 600, // 裁剪高度
      giftImgUrl: "",
      curStoreId: "574b59ef-b19c-11e7-9233-37891743d141"
    };
  },
  methods: {
    //上传图片
    cropImg(e) {
      let reader = new FileReader();
      let that = this;
      let fileObj = e.target.files[0];

      if (e.target.files.length == 0) {
        return false;
      }

      // 判断图片大小
      if (fileObj.size > this.coverImgMaxSize) {
        this.errorMsg = "上传图片的大小不能超过5MB";
        this.openErrorTip = true;
        this.$message({
          message: "上传图片的大小不能超过5MB",
          type: "error"
        });
        return false;
      }

      reader.onload = (function(file) {
        return function(e) {
          let _this = this; // 缓存当前this
          let img = new Image();
          img.src = this.result;
          img.onload = function() {
            let imgBase64 = _this.result; //获得图片的base64的数据
            that.oldImgBase64 = imgBase64;
            that.showCrop = true;
          };
        };
      })(e.target.files[0]);

      reader.readAsDataURL(e.target.files[0]);
    },
    getCropImgBase(imgUrl) {
      this.giftImgUrl = imgUrl;
    },
    handleCurrentChange(val) {
      this.getAllData(val - 1);
      this.curPage = val;
    },
    doDeal(item) {
      this.nowSelGift = JSON.stringify(item);
      this.nowSelGift = JSON.parse(this.nowSelGift);
      this.showChangeGift = true;
      return;
      this.$http({
        url: BASE_URL+"v1/call/update-storeAccount",
        method: "POST",
        data: {
          id: item.id,
          accounting: 1
        }
      }).then(res => {
        console.log(res);
        this.$message({
          message: "划账成功",
          type: "success"
        });
        this.getAllData(this.curPage - 1);
      });
    },
    save() {
      let giftImgUrl = this.giftImgUrl ? this.giftImgUrl:this.nowSelGift.imageURL;
      this.$http({
        url: BASE_URL+"v1/call/update-gift",
        method: "POST",
        data: {
          id: this.nowSelGift.id,
          name: this.nowSelGift.name,
          productUrl: giftImgUrl,
          salesPrice: this.nowSelGift.salesPrice
        }
      }).then(res => {
        console.log(res);
        if (res.data.result.code == 200) {
          this.$message({
            message: res.data.result.msg,
            type: "success"
          });
          this.showChangeGift = false;
          this.getAllData();
        }
      });
    },
    getAllData() {
      this.$http({
        url: BASE_URL+"v1/call/find-allGift",
        method: "GET"
      }).then(res => {
        console.log(res);
        this.giftData = res.data;
      });
    }
  },
  created: function() {},
  mounted() {
    this.getAllData();
  }
};
</script>
<style lang="scss" scoped>
@import "./gift.scss";
</style>
